<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小京鱼好物商城</title>
    <!-- <link rel="stylesheet" href="style-1.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        /* 定位模块 */
        
        .dw {
            width: 5px;
            height: 100%;
            float: right;
            background-color: #7a6e6e;
        }
        /* 头部导航栏模块 */
        
        .nav {
            height: 30px;
            background-color: #e3e4e5;
        }
        
        .nav a {
            float: left;
            color: #999999;
            font-size: 12px;
            line-height: 30px;
            margin: 0 10px;
        }
        
        .nav a:hover {
            color: #f30213;
        }
        
        .nav .lr .right {
            margin-left: 500px;
        }
        
        .lr {
            margin: 0 106.5px;
        }
        
        .snav {
            height: 87px;
            margin: 0 106.5px;
        }
        
        .snav img {
            float: left;
            /* width: 276px; */
            /* height: 50px; */
            margin: 15px 0 22px 0;
        }
        
        .snav img {
            width: 134px;
            height: 42px;
        }
        
        .snav input {
            width: 504px;
            height: 32px;
            margin-left: 250px;
            margin-top: 25px;
            border: #f30213 2px solid;
            border-right: none;
            font-size: 12px;
            color: #999;
        }
        /* 搜索模块 */
        
        .snav .s {
            width: 82px;
            height: 34px;
            margin-left: -6px;
            background-color: #f30213;
            border: none;
            color: #fff;
            font-size: 16px;
        }
        /* 购物车模块 */
        
        .snav .g {
            width: 140px;
            height: 34px;
            margin: 0 28px 0 19px;
            color: #f30213;
        }
        /* 全部商品分类模块 */
        
        .ssnav {
            height: 35px;
            margin: 0 106.5px;
        }
        
        .ssnav a {
            float: left;
            line-height: 35px;
            color: #000;
            font-weight: 600;
            padding: 0 22px;
            font-size: 14px;
        }
        
        .ssnav a:hover {
            color: #f30213;
        }
        
        .x {
            height: 2px;
            background-color: #f30213;
        }
        
        .bx {
            width: 100%;
            background-color: #f0f3ef;
        }
        
        .b {
            width: 990px;
            background-color: #ffffff;
            margin: 0 auto;
        }
        
        .swiper {
            width: 990px;
            height: 380px;
        }
        
        .d {
            height: 40px;
            background-color: #f0f3ef;
        }
        
        .sb {
            height: 356px;
            margin: 0 30px;
            /* padding: 54px 66px 0 66px; */
        }
        
        .sb a {
            /* float: left; */
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            font-size: 16px;
            margin: 54px 60px;
            font-size: 16px;
            color: #999999;
            margin-bottom: 20px;
        }
        
        .sb a img {
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
        }
        
        .bg-23 {
            width: 990px;
            padding: 10px 0;
            background-color: #f0f3ef;
        }
        
        .bg-23 img {
            width: 990px;
            height: 108px;
        }
        
        .bg-4 {
            width: 990px;
            height: 396px;
        }
        
        .ssb {
            height: 70px;
        }
        
        .ssb a {
            float: left;
            display: block;
            /* width: 72px; */
            height: 70px;
            line-height: 70px;
            /* margin: 0 46px; */
            padding: 0 45px;
            font-size: 18px;
            color: #000;
        }
        
        .ssb a:hover {
            color: #f30213;
        }
        /* 组合图片模块 */
        
        .q {
            width: 100%;
            height: 558px;
        }
        
        .sl {
            float: left;
            width: 50%;
        }
        
        .ss,
        .sx {
            float: left;
            width: 50%;
            height: 50%;
        }
    </style>
</head>

<body>
    <div class="dw"></div>
    <div class="nav">
        <div class="lr">
            <div class="left">
                <li><a href="#">京东首页</a></li>
                <li><a href="#"> 江西</a></li>
            </div>
            <div class="right">
                <li><a href="#">你好，请登录</a></li>
                <li><a href="#" style="color: #f30213;">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">我的京东</a></li>
                <li><a href="#">京东会员</a></li>
                <li><a href="#">企业采购</a></li>
                <li><a href="#">客户服务</a></li>
                <li><a href="#">网站导航</a></li>
                <li><a href="#">手机京东</a></li>
            </div>
        </div>
    </div>
    <div class="snav">
        <img src="images/bg1.png" alt="京东小dog">
        <input type="text">
        <button class="s">搜索</button>
        <button class="g">我的购物车</button>
    </div>
    <div class="ssnav">
        <li><a href="#" style="width: 170px; height: 35px; background-color:#f30213; color:#fff; 
        font-size:14px; text-align: center; font-weight: normal; padding: 0 10px;">全部商品分类</a></li>
        <li><a href="#">京东服饰</a></li>
        <li><a href="#">美妆馆</a></li>
        <li><a href="#">超市</a></li>
        <li><a href="#">生鲜</a></li>
        <li><a href="#">京东国际</a></li>
        <li><a href="#">闪购</a></li>
        <li><a href="#">拍卖</a></li>
        <li><a href="#">金融</a></li>
    </div>
    <div class="x"></div>
    <div class="bx">
        <div class="b">
            <!-- 主图 -->
            <a href="#">
                <img src="images/item-3.png" alt="" class="swiper">
            </a>
            <div class="d"></div>
            <div class="sb">
                <a href="#"><img src="images/icon-1.png" alt="">京鱼座</a>
                <a href="#"><img src="images/icon-2.png" alt="">优惠券</a>
                <a href="#"><img src="images/icon-3.png" alt="">插座</a>
                <a href="#"><img src="images/icon-4.png" alt="">优惠价</a>
                <a href="#"><img src="images/icon-5.png" alt="">净化器</a>
                <a href="#"><img src="images/icon-6.png" alt="">扫地机</a>
                <a href="#"><img src="images/icon-7.png" alt="">投影仪</a>
                <a href="#"><img src="images/icon-8.png" alt="">灯及灯泡</a>
                <a href="#"><img src="images/icon-9.png" alt="">全屋智能</a>
                <a href="#"><img src="images/icon-10.png" alt="">全部分类</a>
            </div>
            <div class="bg-23">
                <!-- 限时秒杀 -->
                <a href="#">
                    <img src="images/bg-2.png" alt="">
                </a>
                <!-- 智能优品 -->
                <a href="#">
                    <img src="images/bg-3.png" alt="">
                </a>
            </div>
            <!-- 今日红包 -->
            <a href="#">
                <img src="images/bg-4.jpg.webp" alt="" class="bg-4">
            </a>
            <!-- 鲸鱼座产品 -->
            <a href="#">
                <img src="images/bg-5.png" alt="" style="width: 990px; background-color: #f0f3ef;">
            </a>
            <!-- 鲸鱼座 -->
            <a href="#">
                <img src="images/bg-6.jpg.webp" alt="" style="width: 990px; margin: 0; padding: 0;">
            </a>
            <!-- 全屋智能 -->
            <a href="#">
                <img src="images/bg-7.png" alt="" style="width: 990px; background-color: #f0f3ef;">
            </a>
            <div class="ssb">
                <li><a href="#" style="color: #f30213; font-size: 22px; ">全屋智能</a></li>
                <li><a href="#">智能照明</a></li>
                <li><a href="#">智能遮阳</a></li>
                <li><a href="#">影音娱乐</a></li>
                <li><a href="#">智能烹饪</a></li>
                <li><a href="#">智能安防</a></li>
            </div>
            <!-- 去定制 -->
            <a href="#">
                <img src="images/bg-8.jpg.webp" alt="" style="width:990px; height: 840px;">
            </a>
            <!-- 玩转智能生活 -->
            <a href="#">
                <img src="images/bg-8.png" alt="" style="width:990px; background-color: #f0f3ef;">
            </a>
            <!-- 三拼图组合图片模块 -->
            <div class="q">
                <div class="sl">
                    <img src="images/bg-9.jpg.webp" alt="">
                </div>
                <div class="ss">
                    <img src="images/bg-10.jpg.webp" alt="">
                </div>
                <div class="sx">
                    <img src="images/bg-11.jpg.webp" alt="">
                </div>
            </div>
            <!-- 本周热门推荐 -->
            <a href="#">
                <img src="images/bg-12.png" alt="" style="background-color: #f0f3ef;">
            </a>
        </div>
    </div>


</body>

</html>